<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Section 5: Selectors</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="file:///E:/www.css-zibaldone.com/style/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../adds.css" type="text/css" media="screen">
</head>
<body>

<h2>Section 5: Selectors</h2>


<h3>Design notes</h3>
<p>These tests follow the order of the <a href="http://www.w3.org/TR/CSS21/selector.html">specifications</a>. The words <cite>Valid</cite> and <cite>Invalid</cite> mean that the relevant
<acronym title="Cascading Style Sheets">CSS</acronym> will and won't validate, respectively. 
The word <cite>Interact</cite> means that the user should interact with the page in order to view
the result. In the following tests, the red color
indicates failure while the green color indicates that the test has been passed by the browser. The label <cite>Assertion</cite> explains
the scope of the test.</p>

<h4>Download</h4>
<p>You can download all these tests in a <a href="sec5.zip">single zip file</a>.</p>




<table summary="Summary of tests">
<caption>Summary of tests</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Title</th>
<th scope="col">Flag</th>
<th scope="col">Assertion</th>
</tr>

<tr>
<td><a href="adjacent0.html">adjacent0.html</a></td>	
<td>Selectors: Adjacent selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the adjacent element</td>
</tr>

<tr>
<td><a href="adjacent1.html">adjacent1.html</a></td>
<td>Adjacent selectors without the space separator</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the adjacent element also without the space separator</td>
</tr>


<tr>
<td><a href="adjacent2.html">adjacent2.html</a></td>	
<td>Adjacent selectors with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the adjacent element when combined with the universal selector</td>
</tr>

<tr>
<td><a href="attribute0.html">attribute0.html</a></td>	
<td>Attribute selectors: Generic match</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with the specified attribute, disregarding its value</td>
</tr>


<tr>
<td><a href="attribute1.html">attribute1.html</a></td>  	
<td>Attribute selectors: Generic match with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with the specified attribute, disregarding its value</td>
</tr>


<tr>
<td><a href="attribute2.html">attribute2.html</a></td>  	
<td>Attribute selectors: Exact match</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with the specified attribute and the specified value</td>
</tr>


<tr>
<td><a href="attribute3.html">attribute3.html</a></td>  	
<td>Attribute selectors: Exact match with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with the specified attribute and the specified value</td>
</tr>

<tr>
<td><a href="attribute4.html">attribute4.html</a></td>  	
<td>Attribute selectors: Partial match</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with one of the values separated by a space</td>
</tr>


<tr>
<td><a href="attribute5.html">attribute5.html</a></td>	
<td>Attribute selectors: Partial match with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements with one of the values separated by a space</td>
</tr>

<tr>
<td><a href="attribute6.html">attribute6.html</a></td>	
<td>Attribute selectors: Substring matching</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have an hyphen-separated list of attribute values</td>
</tr>


<tr>
<td><a href="attribute7.html">attribute7.html</a></td>	
<td>Attribute selectors: Substring matching with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have an hyphen-separated list of attribute values</td>
</tr>

<tr>
<td><a href="before-after0.html">before-after0.html</a></td>	
<td>The :before and :after pseudo-elements</td>
<td class="valid">Valid</td>
<td>Browsers should insert content before and after the content of the specified element</td>
</tr>

<tr>
<td><a href="childselector0.html">childselector0.html</a></td>	
<td>Child selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the child elements</td>
</tr>

<tr>
<td><a href="childselector1.html">childselector1.html</a></td>	
<td>Child selectors without the space separator</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the child elements, even when they are not separed by a space</td>
</tr>

  
<tr>
<td><a href="childselector2.html">childselector2.html</a></td>	
<td>Child selectors and universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the child elements, even when combined with an universal selector</td>
</tr>

<tr>
<td><a href="class0.html">class0.html</a></td>	
<td>Class selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have the specified class</td>
</tr>


<tr>
<td><a href="class1.html">class1.html</a></td>	
<td>Class selectors with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have the specified class</td>
</tr>

<tr>
<td><a href="class2.html">class2.html</a></td>	
<td>Class selectors: Multiple classes</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have the specified class or classes</td>
</tr>

<tr>
<td><a href="descendantselector0.html">descendantselector0.html</a></td>	
<td>Descendant selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the descendant elements</td>
</tr>



<tr>
<td><a href="descendantselector1.html">descendantselector1.html</a></td>	
<td>Descendant selectors and universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the descendant elements</td>
</tr>



<tr>
<td><a href="dinamicpseudoclasses0.html">dinamicpseudoclasses0.html</a></td>	
<td>The dynamic pseudo-classes: :hover on links</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the elements</td>
</tr>




<tr>
<td><a href="dinamicpseudoclasses1.html">dinamicpseudoclasses1.html</a></td>	
<td>The dynamic pseudo-classes: :hover on different elements</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the elements</td>
</tr>



<tr>
<td><a href="dinamicpseudoclasses2.html">dinamicpseudoclasses2.html</a></td>	
<td>The dynamic pseudo-classes: :active</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the elements</td>
</tr>



<tr>
<td><a href="dinamicpseudoclasses3.html">dinamicpseudoclasses3.html</a></td>	
<td>The dynamic pseudo-classes: :focus</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the elements</td>
</tr>





<tr>
<td><a href="first-child0.html">first-child0.html</a></td>	
<td>The :first-child pseudo-class</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the element which is the first child of its parent</td>
</tr>



<tr>
<td><a href="first-child1.html">first-child1.html</a></td>	
<td>The :first-child pseudo-class with the universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the element which is the first child of its parent</td>
</tr>





<tr>
<td><a href="first-letter0.html">first-letter0.html</a></td>	
<td>The :first-letter pseudo-element</td>
<td class="valid">Valid</td>
<td>Browsers should apply the rule only to the first letter of a block-level element</td>
</tr>

<tr>
<td><a href="first-line0.html">first-line0.html</a></td>
<td>The :first-line pseudo-element</td>
<td class="valid">Valid</td>
<td>Browsers should apply the rule only to the first line of a block-level element</td>
</tr>

<tr>
<td><a href="grouping0.html">grouping0.html</a></td>
<td>Grouping</td>
<td class="valid">Valid</td>
<td>Browsers should apply the rule to all elements grouped</td>
</tr>

<tr>
<td><a href="grouping1.html">grouping1.html</a></td>
<td>Grouping: Invalid grouping</td>
<td class="invalid">Invalid</td>
<td>Browsers should ignore an invalid grouping</td>
</tr>

<tr>
<td><a href="id0.html">id0.html</a></td>
<td>ID selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have the specified ID</td>
</tr>


<tr>
<td><a href="id1.html">id1.html</a></td>
<td>ID selectors with universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the elements which have the specified ID</td>
</tr>



<tr>
<td><a href="lang0.html">lang0.html</a></td>
<td>The language pseudo-class: :lang</td>
<td class="valid">Valid</td>
<td>Browsers should apply the rule when has a lang attribute set in a particular language</td>
</tr>

<tr>
<td><a href="link-visited0.html">link-visited0.html</a></td>
<td>The link pseudo-classes: :link and :visited</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the links</td>
</tr>



<tr>
<td><a href="link-visited1.html">link-visited1.html</a></td>
<td>The link pseudo-classes: :link and :visited and the universal selector</td>
<td class="valid">Valid <span class="interact">Interact</span></td>
<td>Browsers should honour the change of state in the links</td>
</tr>

<tr>
<td><a href="pseudo-elements0.html">pseudo-elements0.html</a></td>
<td>Invalid combination of pseudo-elements</td>
<td class="invalid">Invalid</td>
<td>Browsers should ignore a trailing token</td>
</tr>

<tr>
<td><a href="typeselector0.html">typeselector0.html</a></td>
<td>Type selectors</td>
<td class="valid">Valid</td>
<td>Browsers should apply each rule to the specified elements</td>
</tr>

<tr>
<td><a href="universalselector0.html">universalselector0.html</a></td>	
<td>Universal selector</td>
<td class="valid">Valid</td>
<td>Browsers should apply the rule to all elements</td>
</tr>




</table>

<p class="day"><strong>Date:</strong> December 2, 2007</p>





</body>
</html>
